
<template>
  <div>
    <transition name="mybox">
      <div class=" ta pr psst" :class="[hides ? ' ' : 'active']">

        <div class="div1">
          <p>现在入驻平台，免3年入驻费！<span>立即入驻！</span></p>
          <a href="javascript:;" class="close" @click="tophide">
            <i class="iconfont icon-guanbi"></i>

          </a>
        </div>

      </div>
    </transition>
    <div class="header">
      <div class="container">
        <div class="clearfix">
          <div class="fl logo" @click="handleLogo(123)">
            <img src="@/assets/img/logo.svg" alt="" />
          </div>
          <nav class="fl nav-con">
            <ul class="clearfix nav-ul">
              <li>
                <a class="a" @click="handleClickSwitch">生物医药 </a>
              </li>
              <li>
                <a class="a" @click="handleClickSwitch">娱乐游戏</a>
              </li>
              <li>
                <a class="a" @click="handleClickSwitch">卡通绘画</a>
              </li>

              <li>
                <a href="/designersettled">设计师入驻</a>
              </li>
              <li class="pr">
                <a href="">....</a>
                <ul class="er-uls pa">
                  <li v-for="item in navListArr" :key="navListArr.id">
                    <a href="">{{ item.name }}</a>
                  </li>

                </ul>
              </li>
            </ul>
          </nav>
          <div class="fr clearfix">
            <!-- 未登录 -->
            <div class="fl nav-right">
              <a href="/studylist"> 学习 </a>
              <a href="/stationlist"> 酷站 </a>
              <!-- <a href="/designersettled">设计师入驻</a> -->
              <RouterLink to="/recruitment"> 设计师 </RouterLink>
            </div>
            <div v-if="!isLogin" class="search-box fl clearfix">
              <a href=""><img src="@/assets/img/sou.svg" alt="" /> </a>


            </div>


            <!-- 登录成功后隐藏 -->
            <div v-if="!isLogin" class="fl land-box">
              <a href="/sign">登录</a>
              <a href="/register">注册</a> &nbsp;&nbsp;&nbsp;
            </div>


            <!-- 登录 成功-->
            <div class="search-for clearfix fl">
              <div class="fl searchinp pr">
                <input type="text" placeholder="搜索..." />
                <button><i class="iconfont icon-sousuo1"></i></button>
              </div>
              <div class="tou-img fl pr" v-if="isLogin">
                <a>
                  <!-- 头像 -->
                  <img :src="imgUrl" alt="" />
                </a>

                <ul class="tou-ul pa">
                  <li>
                    <a @click="handlePushHomePage(userInfoId)">我的主页</a>
                  </li>
                  <li>
                    <a href="/personaldata"> 个人资料</a>
                  </li>
                  <li>
                    <a href="/collect"> 我的收藏</a>
                  </li>
                  <li @click="freeshow">
                    <a href="javascript:;"> 申请免费设计师账户</a>
                  </li>
                  <li>
                    <a href="/passcheck"> 账号设置</a>
                  </li>
                  <li>
                    <a @click="handleExit">退出</a>
                  </li>
                </ul>
              </div>

              <div class="fl overall-btn" v-if="isLogin">
                <a href="/uploadworks"> 提交作品</a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 弹出申请免费设计师账户 -->
    <div class="tanchu-box accountsq-box" v-if="free">
      <div class="modify-avatar">
        <div class="colse pa" @click="freehide">
          <i class="iconfont icon-guanbi"></i>
        </div>
        <p class="tile ta">申请免费设计师账户</p>
        <p class="accountsqmiao ta">在uimall上展现你的天赋</p>

        <ul class="accountsqm-ul">
          <li>
            <p class="p1">完善资料*</p>
            <p class="p2">添加您的头像、姓名，让我们充分了解你。</p>
          </li>
          <li>
            <p class="p1">上传你的作品*</p>
            <p class="p2">您的作品描述得越详细，上传通过率就越高。</p>
          </li>
        </ul>
        <div class="overall-btn ta">
          <a href="">现在申请</a>
        </div>
      </div>
    </div>
    <!-- 手机导航 -->
    <div class="phone">
      <div class="container">
        <div class="clearfix">
          <div class="phone_logo fl">
            <a href="/" target="_blank"><img src="@/assets/img/logo.svg"></a>
          </div>
          <div class="sp_nav fr clearfix" id="phone_nav">
            <div class="fl phone-tou">
              <img src="@/assets/img/1.png" alt="">

            </div>
            <span class="iconfont icon-caidan" @click="phoneshow()"></span>
          </div>
        </div>
      </div>
    </div>

    <div class="sjj_nav" :class="[phone ? 'active' : '']">
      <div class="top">
        <div class="container">
          <div class="clearfix">
            <a href="/" class="bl fl"><img src="@/assets/img/logo.svg"></a>
            <div class="fr"><i class="iconfont icon-guanbi" @click="phonehide()"></i></div>
          </div>
        </div>
      </div>
      <ul class="bot">
        <li></li>
        <li>
          <a href="">生物医药 </a>

        </li>
        <li>
          <a href="">娱乐游戏 </a>

        </li>
        <li>
          <a href="">卡通绘画</a>

        </li>
        <li>
          <a href=""> 设计师 </a>
        </li>
        <li>
          <a href="/sign">登录</a>
        </li>
        <li>
          <a href="/register">注册</a>
        </li>
        <!-- <li>
                <a href="" class="w80 bl">产品中心</a><i class="sp_nav_xjb"><svg t="1496193951932" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="995" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"> <path d="M768.468 428.876l-84.723-84.723-170.711 170.711-170.711-170.711-84.723 84.723 170.711 170.711-0.092 0.091 84.723 84.724 0.092-0.092 0.092 0.092 84.723-84.724-0.092-0.091z" p-id="996"></path></svg></i>
                <ul>
                    <li>
                        <a href="hpv.html" class="w80 bl">HPV疫苗预约</a> </li>
                    <li>
                        <a href="it.html" class="w80 bl">IT运维服务</a> </li>
                    <li>
                        <a href="ad.html" class="w80 bl">AD智能小工单</a> </li>
                    <li>
                        <a target="_blank" class="w80 bl" href="zljk.html">智能监控</a>
                    </li>
                    <li>
                        <a target="_blank " class="w80 bl" href="erh.html">eHR人事通</a>
                    </li>
                </ul>
            </li>
                -->
      </ul>
    </div>
  </div>
</template>
<script>
import * as api from "@/api/users"

import axios from "axios"

export default {

  data() {
    return {
      free: false,
      search1: false,
      phone: false,
      hides: true,
      // 判断是否登录有token
      isLogin: sessionStorage.getItem('bm-token') ? true : false,

      // 导航栏
      navListArr: "",

      // 用户信息
      userInfo: "",

      userInfoId: "",

      // 图片网址
      imgPath: 'https://ui-mall.oss-accelerate.aliyuncs.com/',

      // 图片路径
      imgName: "",
    }
  },

  created() {
    // 获取用户信息
    this.getUserInfo()

    // 导航栏
    api.navListApi()
      .then(res => {
        this.navListArr = res.data.data
      })

  },
  methods: {
    //  子传父,点击切换
    handleClickSwitch(event) {
      this.$router.push('/')

      const text = event.target.innerText
      // console.log(text);

      this.$emit('button-click', text)
    },


    // 点击logo回到主页面,并且请求一次列表

    handleLogo(msg) {
      this.$router.push('/')
      // console.log(msg);

      this.$emit('logo-click', msg)
    },










    async freeshow() {
      this.free = true
    },
    async freehide() {
      this.free = false
    },
    async searchshow() {
      this.search1 = !this.search1;
    },

    async phoneshow() {
      this.phone = true
    },
    async phonehide() {
      this.phone = false
    },
    async tophide() {
      this.hides = false
    },
    // 请求用户信息
    async getUserInfo() {
      try {
        let res = await api.UserInfoAPi()
        // console.log(res);
        this.userInfo = res.data.data

        this.userInfoId = res.data.data.id

        // console.log(this.userInfo);
        this.imgName = res.data.data.avatar
        // console.log(this.imgName);
      } catch (e) {
        console.log(e);
      }
    },



    handleExit() {
      let token = sessionStorage.getItem("bm-token")
      // 退出登录接口
      // api.userLogoutApi()
      //   .then(res => {
      //     console.log(res);
      //   }).catch(e => {
      //     console.log(e);
      //   })
      // 退出按钮，跳转到登录页
      this.$router.push("/sign")
      // 并且移除token
      sessionStorage.removeItem("bm-token")
      sessionStorage.removeItem("userInfo")
    },

    handlePushHomePage(id) {
      this.$router.push({
        path: '/designer',
        query: {
          id
        }
      })

    }
  },
  computed: {
    imgUrl() {
      return this.imgPath + this.imgName
    }
  }

}
</script>

<style scoped lang="less">
.a {
  cursor: pointer;
  text-decoration: none;
}
</style>
